/**
 * 生成符合区域隔离要求的坐标点
 * @param {number} area 区域编号 (0-6)
 * @returns {{x: number, y: number}} 坐标点
 */

const baseWidth = 1920;
const baseHeight = 1080;
export function generatePoint(i) {
  var chartDom = document.getElementById('root');
  // 处理坐标
  const clientH = chartDom.scrollHeight;
  const clientW = chartDom.scrollWidth;
  const scaleW = clientW / baseWidth;
  const scaleH = clientH / baseHeight;
  const centerPoints = [clientW / 2 + (-35 * scaleW), clientH / 2 + (-180 * scaleH)];
  if (i.id === 1) {
    return {
      x: centerPoints[0],
      y: centerPoints[1]
    }
  } else {
    return {
      x: centerPoints[0] + (i.x * scaleW),
      y: centerPoints[1] + (i.y * scaleH)
    }
  }
}
export const addItemAnmition = (data) => {
  return {
    type: 'effectScatter',
    coordinateSystem: 'cartesian2d',
    rippleEffect: {
      period: 4,          // 动画时长，单位秒
      scale: 2,         // 涟漪扩散的倍数
      brushType: 'stroke', // 绘制方式，可选 'stroke' 或 'fill'
      symbolSize: 10,
      roundTrip: false
    },
    animation: true,
    animationDuration: 2000, // 动画持续时间为2秒
    animationEasing: 'cubicOut', // 缓动函数，使过渡更柔和
    // data: [
    //   { value: [100, 200] },
    //   { value: [300, 400] }
    // ],
    data,
    tooltip: { show: false },
    z: 10, // 确保叠加在 graph 之上
  }
}

export const onGraphHover = (selected, options, data) => {
  const selectedId = selected.id;
  const highlighLines = [];
  const activeItems = [selectedId];
  const targets = selected.targets;


  const findTargets = (t) => {
    t.forEach(i => {
      activeItems.push(i);
      highlighLines.push({
        sourceId: selectedId,
        targetId: i
      })
    })
  };
  const findSource = (id) => {
    const f = data.filter(i => i.targets && i.targets.includes(id));
    activeItems.push(...f.map(i => i.id));
    const lines = f.map(i => ({
      sourceId: i.id,
      targetId: selectedId
    }));
    highlighLines.push(...lines);
  }

  // targets ? findTargets(targets) : findSource(selectedId);
  targets && findTargets(targets);
  findSource(selectedId);
  // 设置 graph
  options.series[0].data = options.series[0].data.map(i => {
    if (activeItems.includes(i.id)) {
      return {
        ...i,
        symbolSize: i.symbolSize += 10
      }
    } else return {
      ...i,
      itemStyle: {
        ...i.itemStyle,
        opacity: 0.1
      }
    };
  });

  // 设置lines
  options.series[1].data = options.series[1].data
    .filter(i => highlighLines.some(j => j.sourceId === i.sourceId && j.targetId === i.targetId))
    .map(i => {
      return {
        ...i,
        lineStyle: {
          ...i.lineStyle,
          opacity: 1,
          width: 1,
          color: i.color
        }
      }
    })
  options.series[1].effect.show = true;
  const value = options.series[0].data
    .filter(i => activeItems.includes(i.id))
    .map(i => ({
      value: i.value,
      itemStyle: { color: i.color },
      symbolSize: i.symbolSize
  }))
  // options.series.push(addItemAnmition(value));

  return options;
};

export const fullScreenChange = () => {
  if (elIsFullScreen()) {
    document.exitFullscreen();
    return false;
  } else {
    document.body.requestFullscreen();
    return true;
  }
};